<template>
  <div>
    <el-card style="margin: 0 auto; margin-bottom: 0px">
      <el-button size="mini" type="primary" style="float: right;margin-top: 10px;margin-left: 10px;" @click="tuichu()">退出登录</el-button>
    <el-table
          :data="InfoList"
          v-loading="loading"
          style="width: 900px; margin: 0px auto; min-width: 900px"
        >
          <el-table-column label="序号" prop="" type="index" width="60">
            <template #default="scope">
              {{ (paramsInfo.page - 1) * paramsInfo.pagesize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="id" prop="id">
          </el-table-column>
          <el-table-column prop="username" label="姓名">
          </el-table-column>
          <el-table-column label="性别">
            <template #default="scope">
                <span>{{ scope.row.sex===1? '男':'女' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="text" @click="$router.push(`/info/${scope.row.id}`);">查看详细</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye" style="text-align: center; margin-top: 20px">
          <el-pagination
            layout="total,prev,pager,next,sizes,jumper"
            background
            :total="total"
            :page-size="paramsInfo.pagesize"
            :page-sizes="[10, 30, 100]"
            @current-change="handleChangeCurrent"
            @size-change="handleChangeSize"
          />
        </div>
      </el-card>
  </div>
</template>

<script>
// 导入获取主要信息的接口
import { getList } from '@/api/Info'

export default {
  name: 'IndexPage',
  data () {
    return {
      paramsInfo: {
        page: 1, // 第几页?
        pagesize: 10 // 一页多少数据
      },
      InfoList: [], // 表格数据
      total: null, // 共计数据
      loading: true // 加载效果
    }
  },
  async created () {
    await Promise.all([this.getList()])
  },
  methods: {
    async getList () {
      const res = await getList(this.paramsInfo)
      console.log(res)
      this.InfoList = res.data
      console.log('第', this.paramsInfo.page, '页')
      console.log('一页', this.paramsInfo.pagesize, '条数据')
      console.log('共计:', res.data[0].counts, '条数据')
      this.total = res.data[0].counts
      if (this.InfoList !== []) this.loading = false
    },
    async handleChangeCurrent (page) {
      this.loading = []
      if (this.InfoList !== []) this.loading = true
      this.paramsInfo.page = page
      await this.getList()
    },
    async handleChangeSize (pageSize) {
      this.loading = []
      if (this.InfoList !== []) this.loading = true
      this.paramsInfo.pagesize = pageSize
      await this.getList()
    },
    tuichu () {
      localStorage.removeItem('vuex')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped  lang='scss'>
::v-deep .el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  width: 1000px;
}

::v-deep .el-tabs__active-bar{
  height: 7px;
  background-color:rgb(150, 60, 0) !important;
  border-radius: 3.5px;
}

::v-deep .el-card__header{
  padding:0px 20px;
}
</style>
